<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery模态框</title>
    <!-- jQuery 1.9.1 -->
    <script src="https://cdn.staticfile.org/jquery/1.9.1/jquery.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        hr {
            background-color: #e5e5e5;
            border: none;
            height: 1px;
        }

        .outter {
            width: 200px;
            height: 20px;
            margin: 20px;
        }

        .outter > div {
            margin: 10px;
        }

        .dialog {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
        }

        #show_dialog {
            width: 50px;
            height: 30px;
        }

        .panel {
            width: 500px;
            margin: 0 auto;
            box-shadow: 0 5px 20px rgba(0, 0, 0, .6);
            border: 1px solid rgba(0, 0, 0, .5);
            box-sizing: border-box;
            border-radius: 6px;
            background-color: #FFFFFF;
            opacity: 0;
        }

        .panel-head, .panel-body, .panel-foot {
            padding: 20px;
        }

        .panel-head > h4 {
            font-size: 18px;
            font-weight: 500;
            margin: 10px 0;
        }

        .panel-body > table td:nth-child(1) {
            width: 80px;
            height: 40px;
        }

        .btn-group {
            overflow: hidden;
        }

        .btn-group > button {
            float: right;
            width: 50px;
            height: 35px;
            margin-left: 10px;


        }

        /* 确认按钮样式 */
        .success {
            background-color: #5cb85c;
            border: none;
            color: white;
            outline: none;
            border-radius: 5px;
        }

        .success:hover {
            background-color: #449d44;
        }

        .success:active {
            background-color: #398439;
        }

        /* 取消按钮样式 */
        .cancel {
            background-color: #d9534f;
            border: none;
            color: white;
            outline: none;
            border-radius: 5px;
        }

        .cancel:hover {
            background-color: #c9302c;
        }

        .cancel:active {
            background-color: #ac2925;
        }

    </style>
</head>
<body>

<!--  模态窗口  -->
<div class="dialog">
    <div class="panel">
        <div class="panel-head">
            <h4>请输入新的内容...</h4>
        </div>
        <hr>
        <div class="panel-body">
            <table>
                <tr>
                    <td>用户名</td>
                    <td><input type="text" name="username"></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="password" name="password"></td>
                </tr>
            </table>
        </div>
        <hr>
        <div class="panel-foot">
            <div class="btn-group">
                <button class="success" id="confirm">确认</button>
                <button class="cancel" id="cancel">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="outter">
    <div>
        <span>账号: </span>
        <span id="account">admin</span>
    </div>

    <div>
        <span>密码: </span>
        <span id="passwd">admin</span>
        <span></span>
    </div>
    <div>
        <button id="show_dialog" class="success">显示</button>
    </div>

</div>

<script>
    // 点击修改按钮
    $('#show_dialog').click(function () {
        // 显示模态框
        $('.dialog').css({
            width: $(window).width() + 'px',
            height: $(window).height() + 'px',
            display: 'block',
        });

        // 修改 body 背景为 灰色
        $('body').css('background-color', '#808080');

        // 修改文本框的值
        $('input[name="username"]').val($('#account').text());
        $('input[name="password"]').val($('#passwd').text());

        // 模态框内容 从顶部滑出
        $('.panel').animate({
            marginTop: '50px',
            opacity: 1
        }, 300)
    });

    // 隐藏模态框函数
    function hidden_dialog() {
        // 向上滚动收回 模态窗
        $('.panel').animate({
            marginTop: '0',
            opacity: 0
        }, 300, callback);

        // 动画回调函数
        function callback() {
            // 隐藏模态框
            $('.dialog').css('display', 'none');

            // 取消 body 背景
            $('body').css('background', 'none');
        }
    }

    // 点击取消按钮
    $('#cancel').click(hidden_dialog);

    // 点击确认按钮
    $('#confirm').click(function () {
        // 调用函数隐藏模态框
        hidden_dialog();

        // 修改文本的值
        $('#account').text($('input[name="username"]').val());
        $('#passwd').text($('input[name="password"]').val());
    });
</script>
</body>
</html>